<div class="main-g-affairs-type">
    <div style="padding: 0 5vw 8px">
        <border-item>
            <el-row>
                <el-col :span="4" v-for="item in gaugeItems" :key="item.id">
                    <div class="gauge-item" ref="gaugeItem"></div>
                </el-col>
            </el-row>
        </border-item>
    </div>
    <el-row>
        <el-col :span="6"style="margin-top: 2.5vw">
            <border-item>
                <div class="echart-item" style="margin-bottom:20px">
                    <div class="title" style="border-color:#8D57FF">经济发展指标完成TOP5类别（单位：%）</div>
                    <div ref="echartDiv1" style="height:11.5vw;width:100%"></div>
                </div>
            </border-item>
            <border-item>
                <div class="echart-item">
                    <div class="title" style="border-color:#10C7E7">经济发展指标完成情况TOP3县区（单位：%）</div>
                    <div ref="echartDiv2" style="height:11.5vw;width:100%"></div>
                </div>
            </border-item>
        </el-col>
        <el-col :span="12">
            <div style="width:100%;color: #fff;padding: 0 15px;box-sizing: border-box">
                <border-item>
                    <el-row class="ball-row">
                        <el-col :span="6">
                            <progress-ball percent="30"/>
                            <div class="ball-inner">
                                <span class="icon-span" style="color:#43FF78"><i class="el-icon-caret-top"></i>26%</span>
                                <div style="color:#fff">同比去年</div>
                            </div>
                            <div style="text-align:center;font-size: 14px;padding: 5px 0">经济发展指标完成进度</div>
                        </el-col>
                        <el-col :span="9">
                            <div class="progress-item middle">
                                <div class="title">
                                    <span>地区生产总值（%）</span>
                                    <span class="icon-span"><i class="el-icon-caret-top"></i>26%</span>
                                    <span style="float:right;color:#666">同比去年</span>
                                </div>
                                <el-progress :text-inside="false" :stroke-width="strokeWidth" :percentage="65" color="#43FF78"></el-progress>
                            </div>
                            <div class="progress-item heigh">
                                <div class="title">
                                    <span>固定资产投资（亿元）</span>
                                    <span class="icon-span"><i class="el-icon-caret-top"></i>26%</span>
                                    <span style="float:right;color:#666">同比去年</span>
                                </div>
                                <el-progress :text-inside="false" :stroke-width="strokeWidth" :percentage="65" color="#43FF78"></el-progress>
                            </div>
                            <div class="progress-item heigh">
                                <div class="title">
                                    <span>服务贸易额（%）</span>
                                    <span class="icon-span"><i class="el-icon-caret-top"></i>26%</span>
                                    <span style="float:right;color:#666">同比去年</span>
                                </div>
                                <el-progress :text-inside="false" :stroke-width="strokeWidth" :percentage="65" color="#43FF78"></el-progress>
                            </div>
                        </el-col>
                        <el-col :span="9">
                            <div class="progress-item heigh">
                                <div class="title">
                                    <span>社会消费品零售额（%）</span>
                                    <span class="icon-span"><i class="el-icon-caret-top"></i>26%</span>
                                    <span style="float:right;color:#666">同比去年</span>
                                </div>
                                <el-progress :text-inside="false" :stroke-width="strokeWidth" :percentage="65" color="#43FF78"></el-progress>
                            </div>
                            <div class="progress-item middle">
                                <div class="title">
                                    <span>外面进出口总额（亿美元）</span>
                                    <span class="icon-span"><i class="el-icon-caret-top"></i>26%</span>
                                    <span style="float:right;color:#666">同比去年</span>
                                </div>
                                <el-progress :text-inside="false" :stroke-width="strokeWidth" :percentage="65" color="#43FF78"></el-progress>
                            </div>
                            <div class="progress-item low">
                                <div class="title">
                                    <span>实际利用外资（万美元）</span>
                                    <span class="icon-span"><i class="el-icon-caret-bottom"></i>8%</span>
                                    <span style="float:right;color:#666">同比去年</span>
                                </div>
                                <el-progress :text-inside="false" :stroke-width="strokeWidth" :percentage="8" color="#43FF78"></el-progress>
                            </div>
                        </el-col>
                    </el-row>
                </border-item>
            </div>
        </el-col>
        <el-col :span="6" style="margin-top: 2.5vw">
            <border-item style="margin-bottom:20px">
                <div class="echart-item">
                    <div class="title" style="border-color:#43FF78">2018年连云港市地区生产总值总览（单位：亿元）</div>
                    <div ref="echartDiv3" style="height:11.5vw;width:100%"></div>
                </div>
            </border-item>
            <border-item>
                <div class="echart-item">
                    <div class="title" style="border-color:#F6715E">当年累计固定资产投资各区县占比</div>
                    <div ref="echartDiv4" style="height:11.5vw;width:100%"></div>
                </div>
            </border-item>
        </el-col>
    </el-row>
</div>